<template>
  <div class="md:flex">
    <Card size="small" :loading="loading" title="充值金额" class="md:w-1/4 w-full !md:mt-0 !mt-4 !md:mr-4" :canExpan="false">
      <template #extra>
        <Tag color="green">总</Tag>
      </template>
      <div class="py-4 px-4 flex justify-between">
        <CountTo prefix="$" :decimals="2" :startVal="0" :endVal="statisticsInfo.rechargeAmount" class="text-2xl" />
        <Icon icon="recharge_money|svg" :size="40" />
      </div>
    </Card>
    <Card size="small" :loading="loading" title="下发金额" class="md:w-1/4 w-full !md:mt-0 !mt-4 !md:mr-4" :canExpan="false">
      <template #extra>
        <Tag color="blue">总</Tag>
      </template>
      <div class="py-4 px-4 flex justify-between">
        <CountTo prefix="$" :decimals="2" :startVal="0" :endVal="statisticsInfo.withdrawalAmount" class="text-2xl" />
        <Icon icon="withdraw_money|svg" :size="40" />
      </div>
    </Card>
    <Card size="small" :loading="loading" title="服务费" class="md:w-1/4 w-full !md:mt-0 !mt-4 !md:mr-4" :canExpan="false">
      <template #extra>
        <Tag color="orange">总</Tag>
      </template>
      <div class="py-4 px-4 flex justify-between">
        <CountTo prefix="$" :decimals="2" :startVal="0" :endVal="statisticsInfo.serviceFee" class="text-2xl" />
        <Icon icon="fee_money|svg" :size="40" />
      </div>
    </Card>
    <Card size="small" :loading="loading" title="退款金额" class="md:w-1/4 w-full !md:mt-0 !mt-4" :canExpan="false">
      <template #extra>
        <Tag color="purple">总</Tag>
      </template>
      <div class="py-4 px-4 flex justify-between">
        <CountTo prefix="$" :decimals="2" :startVal="0" :endVal="statisticsInfo.drawbackAmount" class="text-2xl" />
        <Icon icon="drawback_money|svg" :size="40" />
      </div>
    </Card>
  </div>
</template>
<script lang="ts" setup>
  import { ref, watch } from "vue";
  import { CountTo } from '/@/components/CountTo/index';
  import { Icon } from '/@/components/Icon';
  import { Tag, Card } from 'ant-design-vue';

  const statisticsInfo = ref<any>({});
  const props = defineProps({
    loading: { type: Boolean, },
    statisticsData: { type: Object, default: ()=>{} },
  });

  watch(
    () => props.statisticsData,
    (newVal, oldVal) => {
      statisticsInfo.value = newVal;
    }
  );

</script>
